<template>
  <div id="ProblemFeedback">
    <!--    头订单明细-->
    <div id="ProblemHead">
      <van-icon name="arrow-left" size="30" @click="orderList"/>
      <span>订单明细</span>
    </div>

    <!--    订单详情-->
    <div class="ProblemFeedback1">
      <span>订单编号：{{ this.Order.orderInformation.orderId }}</span>
      &emsp;
      <van-icon name="link-o" @click="copyValue($event)"/><br>
      <span>到达时间：{{ this.Order.orderTime.destinationTime }}</span><br>
      <span>出发点：{{ this.Order.orderInformation.startingPointAddress }}</span><br>
      <span>目的地：{{ this.Order.orderInformation.destinationAddress }}</span>
    </div>
    <!--    司机详情及价格-->
    <div class="ProblemFeedback2">
      <div class="ProblemFeedback22">
        <van-image
            round
            width="5rem"
            height="5rem"
            :src="this.Driver.driverAttribute.driverImgurl"/>
      </div>
      <div class="ProblemFeedback222">
        <big><b>{{ this.Driver.carAttribute.carNumber }}</b></big><br>
        <span
            style="color: #9395A7">{{
            this.Driver.baseCarTypeManage.vehicleModel
          }} | {{ this.Driver.baseCarTypeManage.carManufactor }}</span><br><br>
        <span style="color: #9395A7">{{ this.Driver.driverAttribute.driverName }}</span>&emsp;
        <van-rate readonly v-model="this.Driver.driverAttribute.driverPoint" :size="15" color="red" void-icon="star"
                  void-color="#eee"/>&ensp;
        <span style="color: red;font-size: 15px">{{ this.Driver.driverAttribute.driverPoint }}.0分</span>
      </div>
      <div class="ProblemFeedback2222">
        <span style="color: red;margin-left: 15%;font-size: 50px">￥{{ this.Order.orderCost.passengerTotal }}</span>
        <span style="color: deepskyblue;margin-left: 10px;font-size: 10px">明细></span>
      </div>
    </div>

    <!--    评价-->
    <div class="ProblemFeedback3">
      <van-radio-group v-model="form.complaint" :disabled="this.disabled" >
        <van-radio name="1">物品遗失</van-radio>
        <van-radio name="2">司机绕路</van-radio>
        <van-radio name="3">费用错误</van-radio>
        <van-radio name="4">下车未结束计算</van-radio>
        <van-radio name="5">未坐车却收费</van-radio>
        <van-radio name="6">司机态度差</van-radio>
        <van-radio name="7">车辆太脏</van-radio>
        <van-radio name="8">其他</van-radio>
      </van-radio-group>
    </div>
    <!--    补充说明-->
    <div class="ProblemFeedback4">
      <van-field
          v-model="form.complaintDetails"
          rows="3"
          autosize
          type="textarea"
          placeholder="请在此补充说明，以便客服帮您解决问题，谢谢！"
          style="border: 1px solid #288DFB;"
          :readonly="this.readonly"
      />
    </div>
    <!--    提交反馈-->
    <div class="ProblemFeedback5">
      <van-button type="default" color="#4EA9CB" style="width: 100%;border-radius: 50px" @click="complaint">提交反馈
      </van-button>
    </div>
  </div>
</template>

<script>
import {findOrderById, findDriveById, insertComplain, getComplain} from "@/api/order/orderList";
import handleCopy from '@/utils/clipboard'
export default {
  data() {
    return {
      value: 5,
      form: {
        complaint: '1',
        complaintDetails: '',
        orderId: '',
        driverId: ''
      },
      //订单ID
      orderId: this.$route.query.orderId,
      //司机ID
      driverId: this.$route.query.driverId,
      Order: {
        orderCost: {},
        orderInformation: {},
        orderTime: {},
      },
      //司机信息
      Driver: {
        carAttribute: {},
        driverAttribute: {},
        baseCarTypeManage: {}
      },
      disabled: true,
      readonly: true
    }
  },
  created() {
    //查找某个订单信息
    findOrderById(this.orderId).then(res => {
      this.Order = res.data
    })
    //查找司机信息
    findDriveById(this.driverId).then(res => {
      this.Driver = res.data
    })
    //查找订单投诉内容
    getComplain(this.orderId).then(res => {
      if (res.data != null) {
        this.form = res.data
        this.disabled = true
        this.readonly = true
      } else {
        this.form = {
          complaint: '1',
          complaintDetails: '',
          orderId: '',
          driverId: ''
        }
        this.disabled = false
        this.readonly = false
      }
    })
  },
  methods: {
    orderList() {
      this.$router.push('/orderList')
    },
    //提交反馈
    complaint() {
      if (this.form.orderId != null && this.form.orderId != '') {
        this.$toast('该订单已经反馈过，请勿重复投诉')
      } else {
        this.form.orderId = this.orderId
        this.form.driverId = this.driverId
        insertComplain(this.form).then(res => {
          if (res.code == 1) {
            this.$toast('反馈成功')
            this.$router.push('/orderList')
          }
        })
      }
    },
    //点击复制
    copyValue(e){
      let value=this.Order.orderInformation.orderId  //这里设置你要复制的文本信息，可以是text，也可以从e中获取，也可以自定义
      handleCopy(value, e, ()=>{
        console.log("这是复制成功回调函数")
        this.$toast('复制成功')
      },()=>{
        this.$toast('复制失败')
        console.log("这是复制失败回调函数")
      })
    }
  }
}
</script>


<style>
#ProblemFeedback {
  width: 100%;
  height: 100vh;
  background: #F3FCFF;
}

#ProblemHead {
  width: 100%;
  height: 50px;
  background: white;
}

#ProblemHead .van-icon {
  margin-top: 10px;
  margin-left: 20px;
}

#ProblemHead span {
  font-size: 20px;
  margin-left: 30%;
  margin-top: 5px;
}

.ProblemFeedback1 {
  margin-left: 5%;
  width: 95%;
  height: 130px;
  line-height: 30px;
}

.ProblemFeedback2 {
  width: 95%;
  margin-left: 5%;
  height: 200px;
}

.ProblemFeedback22 {
  vertical-align: top; /* 从顶部对齐 */
  display: inline-block;
}

.ProblemFeedback222 {
  width: 70%;
  display: inline-block;
  margin-top: 10px;
  margin-left: 10px;
}

.ProblemFeedback2222 {
  margin-top: 20px;
  width: 100%;
  height: 80px;
}

.ProblemFeedback3 {
  margin-left: 5%;
  width: 95%;
  height: 320px;
}

.ProblemFeedback3 .van-radio {
  margin-top: 20px;
}

.ProblemFeedback4 {
  margin-left: 5%;
  width: 85%;
  height: 100px;
}

.ProblemFeedback5 {
  width: 85%;
  margin-left: 5%;
  height: 50px;
}
</style>